<template>
	<view class="course-detail">


		<view class="top-background">

		</view>

		<view class="info">

			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#ffffff">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" @click="toShareIsland" type="more-filled" size="30"
						color="#ffffff">
					</uni-icons>
				</view>
			</view>

			<view class="course-info">
				<image mode="aspectFill" :src="courseInfo.cover"></img>
			</view>

			<view class="course-status">
				<view class="item">
					<view class="item-top">
						{{courseInfo.userCount}}
					</view>
					<view class="item-bottom">
						已学人数
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						暂无
					</view>
					<view class="item-bottom">
						学习进度
					</view>
				</view>
				<view class="split-line"></view>
				<view class="item">
					<view class="item-top">
						{{courseInfo.chapterCount}}章/{{courseInfo.sectionCount}}节
					</view>
					<view class="item-bottom">
						{{courseStatuses[courseInfo.status]}}
					</view>
				</view>
			</view>

			<view class="content">

				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)">
						<view :class="index==TabCur?'tab-text-on':'tab-text'">{{item}}</view>
						<view v-if="index==TabCur" class="tab-line"></view>
					</view>
				</view>
				<!-- 介绍界面 -->
				<view v-if="TabCur === 0" class="introduce">



					<view style="margin: 50rpx 40rpx 30rpx 40rpx;margin-bottom: 40rpx;margin-top: 40rpx;">
						<userInfoCard :userInfo="courseInfo.userInfo"></userInfoCard>
					</view>




					<view class="tab-card">
						<view class="overview">
							<view class="html-img-fix" v-html="courseInfo.introduction" style="line-height: 50rpx;">
							</view>
						</view>
					</view>


				</view>
				<!-- 目录界面 -->
				<view v-if="TabCur === 1" class="catalogs">
					<view v-for="(catalog,index) in chapters" :key="catalog.id">
						<view class="catalog" @click="handleCatalogIsShowIndex(index)">
							<view>
								{{catalog.name}}
							</view>
							<view>
								<uni-icons type="bottom" size="20" color="#ADAAAA" v-if="!isShowIndex[index]">
								</uni-icons>
								<uni-icons type="top" size="20" color="#ADAAAA" v-if="isShowIndex[index]">
								</uni-icons>
							</view>
						</view>
						<view v-if="isShowIndex[index]" class="section">
							<view v-for="(section,index) in catalog.sections" :key="index"
								style="margin-bottom: 40rpx;">
								<view style="margin-left: 20rpx;">{{section.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 评价界面 -->
				<view v-if="TabCur === 2" class="evaluations">
					<view v-if="evaluationList.length===0" style="padding: 30rpx;text-align: center;font-size: 34rpx;">
						暂时还没有评价
					</view>
					<view class="evaluation" v-for="(item,index) in evaluationList" :key="index">
						<view class="evaluation-top">
							<view class="avatar">
								<image mode="aspectFill" :src="item.avatar"></image>
							</view>
							<view style="display: flex;flex-direction: column;justify-content: space-between;">
								<view>{{item.nickname}}</view>
								<view
									style="margin-top: 10rpx;color: #00000059; font-size: 24rpx;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
									{{item.gmtCreate | gmtToDate}}
								</view>
							</view>
						</view>
						<view style="margin: 10rpx 0 10rpx 100rpx;">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="moneyInput" type="bottom">
			<view class="modal-box">
				<view class="modal-title">购买提示</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">支付任意金额</text>
						<input type="digit" v-model="order.money" placeholder="请输入您想支付的金额" />
					</view>
				</view>
		
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>



		<view class="footer">
			<view class="footer-item">
				<!-- <view class="text" v-if="courseInfo.price>0">￥ {{courseInfo.price}}</view> -->
				<view class="text" style="font-size: 36rpx;" v-if="courseInfo.price>0">￥ 任意</view>
				<view class="text" style="font-size: 36rpx;" v-else>免费</view>
				<view class="footer-button" style="margin-left: 80rpx;" @click="gotoTryStudy()">
					试看
				</view>
				<view class="footer-button" style="background-color: rgb(255,158,8);" @click="gotoBuy()">
					立即{{courseInfo.price > 0 ? '购买' : '加入' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
import order from '../../api/order'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				courseInfo: {},
				courseStatuses:["更新中","已完结"],
				chapters: [],
				evaluationList: [],
				isAll: false,
				showIndex: [],
				isLikeIndex: [],
				options: [{
					icon: this.isSelected === true ? 'star-filled' : 'star',
					text: '收藏'
				}],
				customButtonGroup1: [{
					text: '￥120 ' + '立即学习',
					backgroundColor: 'linear-gradient(90deg, #b2d0fe, #659FFE)',
					color: '#fff'
				}],
				TabCur: 0,
				scrollLeft: 0,
				tabList: ['介绍', '目录', '评价'],
				isShowIndex: [],
				
				
				order:{},


				paddingTop: null
			}
		},
		computed: {
			isPurchased() {
				if (this.courseInfo.userStatus == 0 || this.courseInfo.userStatus == 1) {
					return false
				} else if (this.courseInfo.userStatus == 2 || this.courseInfo.userStatus == 3) {
					return true
				}
			}
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		},
		onLoad(options) {
			var courseId = options.courseId
			this.getCourseInfo(courseId)
			this.getCourseEvaluationList(courseId)
			this.getSimpleCourseDirs(courseId)


			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getCourseInfo(courseId) {
				this.$api.getCourseInfo({
					courseId: courseId
				}).then(res => {
					if(res.data.isBuy){
						uni.redirectTo({
							url: '/pages_being/course/course-study?courseId=' + courseId
						})
					}
					this.courseInfo = res.data;
					this.isShowIndex[0] = true
					this.isShowIndex[1] = true
				})
			},
			getCourseEvaluationList(courseId) {
				this.$api.pageCourseEvaluation({
					pageSize: 20,
					pageNow: 1,
					courseId: courseId,
				}).then(res => {
					this.evaluationList = res.data.rows;
				})
			},
			getSimpleCourseDirs(courseId) {
				this.$api.getSimpleCourseDirs({
					courseId: courseId
				}).then(res => {
					this.chapters = res.data;
				})
			},
			collectOrCancel() {
				let courseId = this.courseInfo.id;
				this.$api.collectOrCancelCourse({
					courseId
				}).then(() => {
					this.getCourseInfo(courseId)
				})
			},
			// 底部点击图标
			onClick(e) {
				this.isSelected = !this.isSelected
				if (this.isSelected) {
					uni.showToast({
						title: `${e.content.text}成功`,
						icon: 'star-filled'
					})
				} else {
					uni.showToast({
						title: `已取消${e.content.text}`,
						icon: 'star-filled'
					})
				}

			},
			gotoBuy() {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				
				let that = this
				let courseId = this.courseInfo.id

				if (this.courseInfo.price > 0) {	
					this.$refs.moneyInput.open("bottom")
				} else {
					this.$api.joinCourse({
						courseId
					}).then(res => {
						uni.showModal({
							title: "加入成功",
							content: "是否将知桨加入常驻，以后可以更快的找到它？",
							success(res) {
								if (res.confirm) {
									that.$api.fixCourseOrCancel({
										courseId
									})
								}
								uni.navigateTo({
									url: '/pages_being/course/course-study?courseId=' + courseId
								})
							}
						})
					})
				}
			},
			modalConfirm(){
				let that = this
				if(this.order.money == null || this.order.money == 0){
					uni.showModal({
						title: "提示",
						content: "输入金额不能为零或者为空"
					})
					return
				}
				this.order.productId = this.courseInfo.id
				this.order.productType = 1
				
				// #ifdef H5
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_MWEB"
				}).then(res => {
					console.log(res.data.data.mwebUrl)
					window.location.href = res.data.data.mwebUrl
				})
				// #endif
				
				// #ifdef APP
				this.$api.payOrder({
					orderId: this.order.id,
					payType: "WXPAY_APP"
				}).then(res => {
					console.log(res.data.data)
					let orderInfo = {
						"appid": res.data.data.appId, // 应用ID（AppID）
						"partnerid": "1608185528", // 商户号（PartnerID）
						"prepayid": res.data.data.prepayId, // 预支付交易会话ID
						"package": res.data.data.package, // 固定值
						"noncestr": res.data.data.nonceStr, // 随机字符串
						"timestamp": res.data.data.timeStamp, // 时间戳（单位：秒）
						"sign": res.data.data.paySign, // 签名，这里用的 MD5 签名
					}
				
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							that.paying = true
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				// #endif
				
				// #ifdef MP-WEIXIN
				this.order.payType = "WXPAY_MINI"
				
				this.$api.purchaseOrder(this.order).then(res => {
					let orderInfo = {
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						sign: res.data.paySign, // 签名，这里用的 MD5 签名
					}
									
					uni.requestPayment({
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: "MD5",
						paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						success(res) {
							uni.showModal({
								title: "加入成功",
								content: "是否将知桨加入常驻，以后可以更快的找到它？",
								success(res) {
									if (res.confirm) {
										that.$api.fixCourseOrCancel({
											courseId:that.courseInfo.id
										})
									}
									uni.navigateTo({
										url: '/pages_being/course/course-study?courseId=' + that.courseInfo.id
									})
								}
							})
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})
				

				// #endif
				
				
				
				
				
				this.$refs.moneyInput.close("bottom")
			},
			modalCancel(){
				this.$refs.moneyInput.close("bottom")
			},
			
			
			
			
			toBackPage() {
				uni.navigateBack()
			},
			gotoStudy() {
				uni.navigateTo({
					url: '/pages_being/course/course-study?courseId=' + this.courseInfo.id
				})
			},
			gotoTryStudy(item) {
				if(!this.$isLogin()){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '../video-study/VideoStudy?courseId=' + this.courseInfo.id
				})
			},




			tabSelect(index) {
				this.TabCur = index
				this.scrollLeft = (index - 1) * 60
			},
			likeOrCancel(evaluation) {
				// 点赞或取消赞
				this.$api.likeOrCancelEvaluation({
					id: evaluation.id
				}).then(() => {
					if (evaluation.isLiked) {
						evaluation.likeNum--
					} else {
						evaluation.likeNum++
					}
					evaluation.isLiked = !evaluation.isLiked
				})
			},
			handleIsAll() {
				this.isAll = !this.isAll
			},
			handleCommentIsShowIndex(index) {
				this.showIndex[index] = !this.showIndex[index]
				this.$forceUpdate()
				// this.$set(this.showIndex[index],index,!this.showIndex[index])
				console.log(this.showIndex)
			},
			handleCatalogIsShowIndex(index) {
				this.isShowIndex[index] = !this.isShowIndex[index]
				this.$forceUpdate()
			},
			onShareAppMessage: function(e) {
				return {
					title: "职研社",
					path: '/pages_course/course-detail/CourseDetail?courseId=' + this.courseInfo.id
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.top-background {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 950rpx;
		background: linear-gradient(#1E5D72, #5DACB1, #B3DFDE);

	}

	.info {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;



		.back-arrow {
			width: 100%;
			//#ifdef MP-WEIXIN
			width: 550rpx;
			//#endif
		
			padding-top: 100rpx;
		
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		
		.course-info {
			width: 670rpx;
			height: 400rpx;
			margin-left: 40rpx;
			margin-top: 20rpx;
		
			border-radius: 20rpx;
			overflow: hidden;
		
		}
		
		.course-status {
			width: 700rpx;
			margin-left: 20rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		
			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 200rpx;
				height: 100rpx;
		
				.item-top {
					font-size: 36rpx;
					color: white;
				}
		
				.item-bottom {
					font-size: 28rpx;
					color: #dcdcdc;
				}
			}
		
			.split-line {
				width: 5rpx;
				height: 60rpx;
				background-color: #ffffff;
			}
		
		}

		.content {
			width: 100%;
			background-color: white;
			margin-top: 40rpx;
			border-radius: 30rpx;

			.course-status {
				width: 690rpx;
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				background-color: #ffffff;
				box-shadow: 1px 1px 8px 2px #e9eee9;
				border-radius: 20rpx;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 200rpx;
					height: 100rpx;

					.item-top {
						font-size: 36rpx;
						color: #2c2c2c;
					}

					.item-bottom {
						font-size: 28rpx;
						color: #2c2c2c;
					}
				}

				.split-line {
					width: 5rpx;
					height: 60rpx;
					background-color: #ffffff;
				}

			}


			.tabs {
				margin-left: 20rpx;
				margin-top: 50rpx;
				width: 350rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.tab {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 70rpx;
					width: 100rpx;

					.tab-text {
						font-size: 36rpx;
						color: gray;
					}

					.tab-text-on {
						font-size: 36rpx;
						font-weight: bold;
						color: #1E5D72
					}

					.tab-line {
						margin-top: 10rpx;
						width: 40rpx;
						height: 5rpx;
						border-radius: 50rpx;
						background-color: #1E5D72;
					}
				}


			}

			.creators {
				width: 670rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;

				.main-creator {

					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 40rpx;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 380rpx;
						height: 90rpx;

						.name {
							font-size: 36rpx;
						}

						.summary {
							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/*连续的空白符会被合并,但文本内的换行无效*/
							white-space: nowrap;
						}

					}

					.button {
						width: 140rpx;
						height: 60rpx;
						background-color: #5DACB1;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						color: white;
						border-radius: 20rpx;
					}

				}

				.other-creator {
					display: flex;
					flex-direction: row;
				}


			}


			.tab-card {
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 40rpx;
				margin-bottom: 160rpx;
				border-radius: 20rpx;
			}

			.catalogs {
				display: flex;
				flex-direction: column;
				width: 670rpx;
				min-height: 1000rpx;
				padding: 10rpx 0 40rpx 0;
				margin-top: 20rpx;
				margin-bottom: 160rpx;

				margin-left: 20px;
				border-radius: 20rpx;

				.catalog {
					display: flex;
					flex-direction: row;
					margin-bottom: 40rpx;
					justify-content: space-between;

				}
			}

			.evaluations {
				display: flex;
				flex-direction: column;
				width: 670rpx;
				margin-left: 20px;
				margin-top: 40rpx;
				margin-bottom: 140rpx;


				.evaluation {
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					border-radius: 20rpx;

					.evaluation-top {
						display: flex;
						flex-direction: row;
						align-items: center;

						.avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 20rpx;
						}
					}



				}
			}
		}

	}

	.footer {
		position: fixed;
		background-color: #ffffff;
		height: 130rpx;
		width: 100%;
		bottom: 0;
		z-index: 3;
		border-top: solid thin #e7e7e7;

		display: flex;
		flex-direction: row;
		align-items: center;

		.footer-item {
			width: 650rpx;
			margin-left: 50rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 46rpx;
				font-weight: bold;

			}

			.footer-button {
				padding: 0 50rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #5DACB1;
				border-radius: 50rpx;
				color: white;
			}
		}
	}
	
	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 600rpx;
	
	
		padding: 40rpx;
		border-radius: 20rpx;
		background: white;
	
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		text-align: left;
	
	
		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	
		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;
	
	
			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;
	
				.modal-key {
					display: block;
	
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
	
			}
	
			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;
	
				line-height: 60rpx;
			}
	
		}
	
		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;
	
			text-align: center;
		}
	
		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;
	
			width: 40%;
		}
	
	}
</style>
